import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_taotaoshipin/pages/drama/drama_routes.dart';
import 'package:flutter_taotaoshipin/util/image_utils.dart';
import 'package:flutter_taotaoshipin/widget/drama_big_ranking_card.dart';
import 'package:flutter_taotaoshipin/widget/my_app_bar.dart';
import 'package:flutter_taotaoshipin/widget/refresh_header.dart';
import 'package:flutter_taotaoshipin/widget/refresh_status_view.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'ranking_controller.dart';

class RankingPage extends StatefulWidget {
  const RankingPage({Key? key}) : super(key: key);

  @override
  State<RankingPage> createState() => _RankingPageState();
}

class _RankingPageState extends State<RankingPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    final controller = Get.find<RankingController>();
    final state = Get.find<RankingController>().state;

    return Scaffold(
      appBar: MyAppBar(centerTitle: '榜单'),
      body: RefreshStatusView(
        controller: controller,
        contentBuilder: (_) {
          return SmartRefresher(
            controller: controller.refreshController,
            // 下拉刷新
            enablePullDown: true,
            header: const RefreshHeader(),
            onRefresh: controller.onRefresh,
            child: CustomScrollView(
              slivers: [
                DecoratedSliver(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: ImageUtils.getAssetImage('home/ranking/header'),
                      fit: BoxFit.fitWidth,
                      alignment: Alignment.topCenter,
                    ),
                  ),
                  sliver: SliverPadding(
                    padding: EdgeInsets.only(top: 180.w),
                    sliver: DecoratedSliver(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius:
                            BorderRadius.vertical(top: Radius.circular(30)),
                      ),
                      sliver: SliverPadding(
                        padding:
                            EdgeInsets.symmetric(horizontal: 16, vertical: 30),
                        sliver: SliverGrid.builder(
                          gridDelegate:
                              const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 1,
                            crossAxisSpacing: 8,
                            mainAxisSpacing: 8,
                            mainAxisExtent: 116,
                          ),
                          itemBuilder: (_, index) {
                            var model = state.rankingList[index];
                            var isFollowing = state.collectList.indexWhere(
                                    (element) =>
                                        element.mainId == model.dramaId) !=
                                -1;
                            return DramaBigRankingCard(
                              title: model.dramaName,
                              cover: model.img,
                              type: '穿越重生',
                              desc: model.desc,
                              index: index,
                              isFollowing: isFollowing,
                              followOnTap: () {
                                controller.userCollectBtnClicked(
                                    model.dramaId!, isFollowing);
                              },
                              playOnTap: () {
                                // 跳转视频详情页
                                Get.toNamed(DramaRoutes.detail, arguments: {
                                  'id': model.dramaId,
                                  'title': model.dramaName,
                                });
                              },
                            );
                          },
                          itemCount: state.rankingList.length,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
